<template>
    <div class="content_data">
        <div class="search">
            <van-search v-model="keyword" show-action placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>
        </div>
        <div class="content_list">
            <div class="card" v-for="item in cardList" :key="item.id" @click="goToDetail(item.id)">
                <div class="card-img">
                    <img :src="item.coverImg">
                </div>
                <div class="card-content">
                    <h3 class="title">{{ item.title }}</h3>
                    <p class="content">{{ item.content }}</p>
                    <span class="time">{{ item.createTime }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { getCardInfo, getSearchInfo } from '../api/index';
import { showToast } from 'vant';

const router = useRouter();

const keyword = ref('');
const onSearch = (val) => showToast(val);
const onClickButton = () => {
    getSearchInfo({ "keyword": keyword.value }).then(
        (res) => {
            if (res.data.code === 200) {
                if (res.data.data.length > 0) {
                    cardList.value = res.data.data;
                } else {
                    showToast('未找到相关内容');
                }
            } else {
                showToast('查询失败');
            }
        }
    )

}

const cardList = ref([]);
const getCardList = () => {
    getCardInfo().then(res => {
        console.log("res.data.data:",res.data.data);
        cardList.value = res.data.data;
        
    })
}

const goToDetail = (id) => {
    router.push({
        name: 'ArticleContent',
        params: { id }
    });
};

onMounted(() => {
    getCardList();
})

</script>

<style lang="scss" scoped>
.content_data {
    background: #ecebeb;
    width: 100%;
    border-radius: 25px 25px 0 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

:deep(.van-search) {
    background: transparent;
    height: 50px;
    flex-shrink: 0;
}

.content_list {
    width: 100%;
    height: calc(100% - 50px);
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */

    &::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }

    .card {
        width: 100%;
        height: 120px;
        background: #fff;
        padding: 12px;
        margin-bottom: 15px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        display: flex;
        gap: 15px;

        .card-img {
            height: 100%;
            flex-shrink: 0;

            img {
                width: 120px;
                height: 100%;
                border-radius: 8px;
                object-fit: cover;
                transition: transform 0.3s ease;

                &:hover {
                    transform: scale(1.02);
                }
            }
        }

        .card-content {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;

            .title {
                font-size: 16px;
                font-weight: bold;
                color: #333;
                margin: 0;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .content {
                font-size: 14px;
                color: #666;
                margin: 6px 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .time {
                font-size: 12px;
                color: #999;
                align-self: flex-end;
            }
        }
    }
}
</style>